<template>
  <commonTable
    rowKey="username"
    :columns="roomTypeTableState.columns"
    :rules="rules"
    name="user"
  >
    <template #form="{ record }">
      <a-form-item label="用户名" name="roomTypeName">
        <a-input v-model:value="record.username"></a-input>
      </a-form-item>
      <a-form-item label="密码" name="password">
        <a-input v-model:value="record.password"></a-input>
      </a-form-item>
      <a-form-item label="邮箱" name="email">
        <a-input v-model:value="record.email"></a-input>
      </a-form-item>
      <a-form-item label="手机号" name="phone">
        <a-input v-model:value="record.phone"></a-input>
      </a-form-item>
    </template>
  </commonTable>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import commonTable from "../../utils/CommonTable";

const roomTypeTableState = reactive({
  dataSource: [],
  columns: [
    {
      title: "用户名",
      dataIndex: "username",
    },
    {
      title: "密码",
      dataIndex: "password",
    },
    {
      title: "邮箱",
      dataIndex: "email",
    },
    {
      title: "手机号",
      dataIndex: "phone",
    },
    {
      title: "操作",
      slots: { customRender: "action" },
    },
  ],
});
const rules = {
  username: [{ required: true, message: "必填项" }],
  password: [{ required: true, max: 16, message: "长度最长16位" }],
  email: [{ required: true, type: "email", message: "不合法" }],
  phone: [
    {
      required: true,
      pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
      message: "不合法",
      transform: (value) => (value ? value.replace(/ /g, "") : value),
    },
  ],
};
</script>

<style scoped></style>
